<template>
	<view class="content">
		<u-navbar :is-back="false" :background="background">
			<view class="slot-wrap">
				<u-search placeholder="请输入关键字" shape="round" v-model="keyword" :animation="true" :show-action="false"
					@focus="search" @search="search">
				</u-search>
			</view>
		</u-navbar>

		<!-- <button @click="getData">获取数据</button> -->

		<view class="list">
			<scroll-view scroll-y="true" class="list-left" :style="'height:'+clientHeight+'px;'">
				<view v-for="(item,index) in leftData" :key="index" class="left-item"
					@tap="changeLeftTab(index,item.id)">
					<view :class="activeIndex===index?'left-name-active':'left-name'">{{item.name}}</view>
				</view>
			</scroll-view>

			<scroll-view scroll-y="true" class="list-right" :style="'height:'+clientHeight+'px;'">
				<view class="right-list" v-for="(item,index) in rightData" :key="item.id">
					<block v-for="(k,i) in item" :key="k.id">
						<view class="list-title">{{k.name}}</view>
						<view class="right-content">
							<view class="right-item" v-for="(j,idx) in k.list" :key="j.id" @tap="goDetails()">
								<image class="right-img" :src="j.imgUrl">
								</image>
								<view class="right-name">{{j.name}}</view>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: "",
				clientHeight: 0,
				leftData: [], //左侧数据
				rightData: [], //右侧数据
				activeIndex: 0,
				background: {
					backgroundColor: '#eed8aa',
				},
				"shopLists": [{
						"id": 1,
						"name": '书写工具',
						"data": [{
								"name": "签字笔类",
								"list": [{
									"id": 1,
									"name": '钢笔',
									"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2uEQv3pfxKVB2lmBlj78Ko-sbmwEtKGnBAA&usqp=CAU"
								}, ]
							},
							{
								"name": "毛笔类",
								"list": [{
										"id": 1,
										"name": '毛笔1',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT1nf2pxRCf_FpE6GSupHwnmEndDYkr7vSk-g&usqp=CAU"
									},
									{
										"id": 2,
										"name": '毛笔2',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR18-pcuTTIqfB0zrMmGgsUIDiS_NIHRBy-sQ&usqp=CAU"
									},
								]
							}
						]
					},
					{
						"id": 2,
						"name": '文件管理',
						"data": [{
								"name": "文件袋",
								"list": [{
									"id": 1,
									"name": '文件袋',
									"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBPczVk52DuZRDkbnVpiJS1RoBCZ6qnSipcw&usqp=CAU"
								}, ]
							},
							{
								"name": "学习类",
								"list": [{
										"id": 1,
										"name": '笔袋',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRstpXFkFzqgSliKFa1a_gWMkMy7IdI8f1TKw&usqp=CAU"
									},
									{
										"id": 2,
										"name": '公用袋',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_OmBaPx7-9eFVY7PcwwHXIWpj01Cvb3zOqQ&usqp=CAU"
									},
								]
							}
						]
					},
					{
						"id": 3,
						"name": '本册便签',
						"data": [{
								"name": "便利贴",
								"list": [{
										"id": 1,
										"name": '粉红便利贴',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3n42hbRyFwSg5DIoTrql9oUl9iI7XNPQBGw&usqp=CAU"
									},
									{
										"id": 3,
										"name": '心愿便利贴',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQAsXY6km-uubDMDChg5Oq0hirPVSkhjyy6yg&usqp=CAU"
									},
								]
							},
							{
								"name": "记事本",
								"list": [{
									"id": 1,
									"name": '记事本',
									"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_QiTnSDwnHWlZI-QmWf5LplibddMbc34mbQ&usqp=CAU"
								}]
							}
						]
					},
					{
						"id": 4,
						"name": '名著导读',
						"data": [{
								"name": "小学名著",
								"list": [{
										"id": 1,
										"name": '白雪公主',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT1mXVMdw3THijo1Vz_Kw8PCmRrz6Pjo8YdMQ&usqp=CAU"
									},
									{
										"id": 3,
										"name": '安徒生童话',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_QR1x0yYI_0tivubRUjMApQLQ3bvAFTc0sg&usqp=CAU"
									},
									{
										"id": 3,
										"name": '小王子',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyu9cIrBZFbdalOZJHVF3_oykGG5oPMNK8-Q&usqp=CAU"
									},
								]
							},
							{
								"name": "初中名著",
								"list": [{
										"id": 1,
										"name": '骆驼祥子',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSfuUPBOK8nbtZBpD5PSZI6FR3AdOqtfcAVvg&usqp=CAU"
									},
									{
										"id": 2,
										"name": '海底两万里',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6UfUcQpGdp5EiQRa8a-PwRMoK9S9gc9KzDg&usqp=CAU"
									},
								]
							},
							{
								"name": "高中名著",
								"list": [{
										"id": 1,
										"name": '红楼梦',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFoDF924jyL1Ge93FI6XrrSR5Cb3DrazwLlQ&usqp=CAU"
									},
									{
										"id": 2,
										"name": '边城',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXrsLN8fNxfXQTsbeSULi7qq07nZT1xwUQUQ&usqp=CAU"
									},
								]
							}
						]
					},
					{
						"id": 5,
						"name": '练习册',
						"data": [{
								"name": "课堂练习册",
								"list": [{
										"id": 1,
										"name": '英语书写练习册',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlk91p88wgII-Uy3TUZYADwGTEhcDZMfWnJw&usqp=CAU"
									},
									{
										"id": 3,
										"name": '中文练习册',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYrF4C-LWjh7Wk_X37CRlk7YVEFFt78VbuqA&usqp=CAU"
									},
								]
							},
							{
								"name": "课外练习册",
								"list": [{
									"id": 1,
									"name": '阅读练习册',
									"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTGLXdmMlXwJpP6XcjQ3hcVogm7zS7dsz_R5A&usqp=CAU"
								}, ]
							}
						]
					},
					{
						"id": 6,
						"name": '书包书袋',
						"data": [{
								"name": "背上书包",
								"list": [{
										"id": 1,
										"name": '小书包',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmTUSPkKg5ZZjN3inPwPQEzvLM90QB5cf_sQ&usqp=CAU"
									},
									{
										"id": 3,
										"name": '酷炫书包',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCrTwSdHrpNHUe9M9Tj_Dva7Ylx3IrFLKFHA&usqp=CAU"
									},
									{
										"id": 3,
										"name": '书包2',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTl_AdXulLY9XAFjR8EQwyQGFeBHf-an9ejXA&usqp=CAU"
									},
								]
							},
							{
								"name": "斜跨书包",
								"list": [{
										"id": 1,
										"name": '蓝色帆布包',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjAwugzrhmBL-6LwkjSbUaA4WvVZncsoJqmQ&usqp=CAU"
									},
									{
										"id": 2,
										"name": '斜跨皮包',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTGiVIzQCiCjn1IKYYWFUaM_1T5BtlKjJsNw&usqp=CAU"
									},
								]
							}
						]
					},
					{
						"id": 7,
						"name": '桌面办公',
						"data": [{
								"name": "学生",
								"list": [{
									"id": 1,
									"name": '桌面笔筒',
									"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDE8SkDlzchNtjGwe3PZX4jEUos4vpSiM9Ul81nBZaApoPvh6rdV96iLwrJLSoCWvy3P4&usqp=CAU"
								}, ]
							},
							{
								"name": "其他",
								"list": [{
									"id": 1,
									"name": '桌上书架',
									"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRMAxMAEsLoi6Hjh2PL8kPnft1FiCL8jjjyA&usqp=CAU"
								}, ]
							}
						]
					},
					{
						"id": 8,
						"name": '涂改用品',
						"data": [{
								"name": "学习类",
								"list": [{
										"id": 1,
										"name": '修正液',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBLZCbvZ7rKqEEGzUYKZzzgJxRQlKkDigX5w&usqp=CAU"
									},
									{
										"id": 3,
										"name": '修正带',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHC5sLKbZdB2oJdArodlt3bdTGB0u1RXVadw&usqp=CAU"
									},
									{
										"id": 3,
										"name": '橡皮擦',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHeMEDVCHUCe8afH_lsbY7AWG7r2hJ2TNSgg&usqp=CAU"
									},
								]
							},
							{
								"name": "生活类",
								"list": [{
										"id": 1,
										"name": '美工刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2uEQv3pfxKVB2lmBlj78Ko-sbmwEtKGnBAA&usqp=CAU"
									},
									{
										"id": 2,
										"name": '开箱刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTotmMAdlwAcH3_qHE04VOeQtbiQK4zQCp-rQ&usqp=CAU"
									},
									{
										"id": 3,
										"name": '开信刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNRMuT1eQ1QEsuOnfjNrfPyQNGLgnIi0F4rw&usqp=CAU"
									},
									{
										"id": 4,
										"name": '磨皮刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyiUOaa8kYadHl0Z07ZecF6QRwiK4hTg1M5g&usqp=CAU"
									},
								]
							}
						]
					},
					{
						"id": 9,
						"name": '胶黏用品',
						"data": [{
								"name": "学习类",
								"list": [{
										"id": 1,
										"name": '转笔刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2uEQv3pfxKVB2lmBlj78Ko-sbmwEtKGnBAA&usqp=CAU"
									},
									{
										"id": 3,
										"name": '铅笔刨',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTotmMAdlwAcH3_qHE04VOeQtbiQK4zQCp-rQ&usqp=CAU"
									},
									{
										"id": 3,
										"name": '剪刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNRMuT1eQ1QEsuOnfjNrfPyQNGLgnIi0F4rw&usqp=CAU"
									},
								]
							},
							{
								"name": "生活类",
								"list": [{
										"id": 1,
										"name": '美工刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2uEQv3pfxKVB2lmBlj78Ko-sbmwEtKGnBAA&usqp=CAU"
									},
									{
										"id": 2,
										"name": '开箱刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTotmMAdlwAcH3_qHE04VOeQtbiQK4zQCp-rQ&usqp=CAU"
									},
									{
										"id": 3,
										"name": '开信刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNRMuT1eQ1QEsuOnfjNrfPyQNGLgnIi0F4rw&usqp=CAU"
									},
									{
										"id": 4,
										"name": '磨皮刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyiUOaa8kYadHl0Z07ZecF6QRwiK4hTg1M5g&usqp=CAU"
									},
								]
							},
						]
					},
					{
						"id": 10,
						"name": '打印工具',
						"data": [{
								"name": "学习类",
								"list": [{
										"id": 1,
										"name": '转笔刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2uEQv3pfxKVB2lmBlj78Ko-sbmwEtKGnBAA&usqp=CAU"
									},
									{
										"id": 3,
										"name": '铅笔刨',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTotmMAdlwAcH3_qHE04VOeQtbiQK4zQCp-rQ&usqp=CAU"
									},
									{
										"id": 3,
										"name": '剪刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNRMuT1eQ1QEsuOnfjNrfPyQNGLgnIi0F4rw&usqp=CAU"
									},
								]
							},
							{
								"name": "生活类",
								"list": [{
										"id": 1,
										"name": '美工刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2uEQv3pfxKVB2lmBlj78Ko-sbmwEtKGnBAA&usqp=CAU"
									},
									{
										"id": 2,
										"name": '开箱刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTotmMAdlwAcH3_qHE04VOeQtbiQK4zQCp-rQ&usqp=CAU"
									},
									{
										"id": 3,
										"name": '开信刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNRMuT1eQ1QEsuOnfjNrfPyQNGLgnIi0F4rw&usqp=CAU"
									},
									{
										"id": 4,
										"name": '磨皮刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyiUOaa8kYadHl0Z07ZecF6QRwiK4hTg1M5g&usqp=CAU"
									},
								]
							},
						]
					},
					{
						"id": 11,
						"name": '课本书壳',
						"data": [{
								"name": "学习类",
								"list": [{
										"id": 1,
										"name": '转笔刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2uEQv3pfxKVB2lmBlj78Ko-sbmwEtKGnBAA&usqp=CAU"
									},
									{
										"id": 3,
										"name": '铅笔刨',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTotmMAdlwAcH3_qHE04VOeQtbiQK4zQCp-rQ&usqp=CAU"
									},
									{
										"id": 3,
										"name": '剪刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNRMuT1eQ1QEsuOnfjNrfPyQNGLgnIi0F4rw&usqp=CAU"
									},
								]
							},
							{
								"name": "生活类",
								"list": [{
										"id": 1,
										"name": '美工刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2uEQv3pfxKVB2lmBlj78Ko-sbmwEtKGnBAA&usqp=CAU"
									},
									{
										"id": 2,
										"name": '开箱刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTotmMAdlwAcH3_qHE04VOeQtbiQK4zQCp-rQ&usqp=CAU"
									},
									{
										"id": 3,
										"name": '开信刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNRMuT1eQ1QEsuOnfjNrfPyQNGLgnIi0F4rw&usqp=CAU"
									},
									{
										"id": 4,
										"name": '磨皮刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyiUOaa8kYadHl0Z07ZecF6QRwiK4hTg1M5g&usqp=CAU"
									},
								]
							},
						]
					},
					{
						"id": 12,
						"name": '美术画材',
						"data": [{
								"name": "学习类",
								"list": [{
										"id": 1,
										"name": '转笔刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2uEQv3pfxKVB2lmBlj78Ko-sbmwEtKGnBAA&usqp=CAU"
									},
									{
										"id": 3,
										"name": '铅笔刨',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTotmMAdlwAcH3_qHE04VOeQtbiQK4zQCp-rQ&usqp=CAU"
									},
									{
										"id": 3,
										"name": '剪刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNRMuT1eQ1QEsuOnfjNrfPyQNGLgnIi0F4rw&usqp=CAU"
									},
								]
							},
							{
								"name": "生活类",
								"list": [{
										"id": 1,
										"name": '美工刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2uEQv3pfxKVB2lmBlj78Ko-sbmwEtKGnBAA&usqp=CAU"
									},
									{
										"id": 2,
										"name": '开箱刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTotmMAdlwAcH3_qHE04VOeQtbiQK4zQCp-rQ&usqp=CAU"
									},
									{
										"id": 3,
										"name": '开信刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNRMuT1eQ1QEsuOnfjNrfPyQNGLgnIi0F4rw&usqp=CAU"
									},
									{
										"id": 4,
										"name": '磨皮刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyiUOaa8kYadHl0Z07ZecF6QRwiK4hTg1M5g&usqp=CAU"
									},
								]
							},
						]
					},
					{
						"id": 13,
						"name": '办公生活',
						"data": [{
								"name": "学习类",
								"list": [{
										"id": 1,
										"name": '转笔刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2uEQv3pfxKVB2lmBlj78Ko-sbmwEtKGnBAA&usqp=CAU"
									},
									{
										"id": 3,
										"name": '铅笔刨',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTotmMAdlwAcH3_qHE04VOeQtbiQK4zQCp-rQ&usqp=CAU"
									},
									{
										"id": 3,
										"name": '剪刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNRMuT1eQ1QEsuOnfjNrfPyQNGLgnIi0F4rw&usqp=CAU"
									},
								]
							},
							{
								"name": "生活类",
								"list": [{
										"id": 1,
										"name": '美工刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2uEQv3pfxKVB2lmBlj78Ko-sbmwEtKGnBAA&usqp=CAU"
									},
									{
										"id": 2,
										"name": '开箱刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTotmMAdlwAcH3_qHE04VOeQtbiQK4zQCp-rQ&usqp=CAU"
									},
									{
										"id": 3,
										"name": '开信刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNRMuT1eQ1QEsuOnfjNrfPyQNGLgnIi0F4rw&usqp=CAU"
									},
									{
										"id": 4,
										"name": '磨皮刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyiUOaa8kYadHl0Z07ZecF6QRwiK4hTg1M5g&usqp=CAU"
									},
								]
							},
						]
					},
					{
						"id": 14,
						"name": '裁剪工具',
						"data": [{
								"name": "学习类",
								"list": [{
										"id": 1,
										"name": '转笔刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2uEQv3pfxKVB2lmBlj78Ko-sbmwEtKGnBAA&usqp=CAU"
									},
									{
										"id": 3,
										"name": '铅笔刨',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTotmMAdlwAcH3_qHE04VOeQtbiQK4zQCp-rQ&usqp=CAU"
									},
									{
										"id": 3,
										"name": '剪刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNRMuT1eQ1QEsuOnfjNrfPyQNGLgnIi0F4rw&usqp=CAU"
									},
								]
							},
							{
								"name": "生活类",
								"list": [{
										"id": 1,
										"name": '美工刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2uEQv3pfxKVB2lmBlj78Ko-sbmwEtKGnBAA&usqp=CAU"
									},
									{
										"id": 2,
										"name": '开箱刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTotmMAdlwAcH3_qHE04VOeQtbiQK4zQCp-rQ&usqp=CAU"
									},
									{
										"id": 3,
										"name": '开信刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNRMuT1eQ1QEsuOnfjNrfPyQNGLgnIi0F4rw&usqp=CAU"
									},
									{
										"id": 4,
										"name": '磨皮刀',
										"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyiUOaa8kYadHl0Z07ZecF6QRwiK4hTg1M5g&usqp=CAU"
									},
								]
							},
						]
					}
				]
			}
		},
		//获取可视高度
		onLoad() {
			this.getData()
		},
		onReady() {
			// console.log(1111,this.getclientHeight());
			uni.getSystemInfo({
				success: (res) => {
					this.clientHeight = res.windowHeight - this.getclientHeight()
					console.log(5, this.clientHeight);
				}
			})
		},
		methods: {
			getData(id) {
				if (id === (this.activeIndex + 1)) {
					return;
				}
				let leftDatas = []
				let rightDatas = []
				this.shopLists.forEach(v => {
					// console.log(v);
					leftDatas.push({
						id: v.id,
						name: v.name
					})
					//如果点击的id相同
					if (v.id === (this.activeIndex + 1)) {
						rightDatas.push(v.data)
					}
				})
				this.leftData = leftDatas
				this.rightData = rightDatas
			},
			search() {
				uni.navigateTo({
					url: "/pages/search_result/index"
				})
			},
			getclientHeight() {
				const res = uni.getSystemInfoSync()
				// console.log(res.statusBarHeight);
				const system = res.osName
				if (system === 'ios') {
					return 44 + res.statusBarHeight
				} else if (system === 'android') {
					return 48 + res.statusBarHeight
				} else {
					return 0
				}
			},
			// 左侧点击事件
			changeLeftTab(index, id) {
				this.getData(id)
				this.activeIndex = index
			},
			//进入详情页
			goDetails() {
				uni.navigateTo({
					url: '/pages/details/details'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #eeeeee;
		// height: 800rpx;
		// padding-bottom: 40rpx;
	}

	.notice-bar {
		padding-top: 10rpx;
		text-align: center;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;

		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
		u-search {
			width: 450rpx;
			margin-left: 120rpx;
		}
	}

	.navbar_msg {
		image {
			width: 52rpx;
			height: 52rpx;
			padding-left: 40rpx;
			padding-right: 20rpx;
		}
	}

	.navbar_sys {
		image {
			width: 54rpx;
			height: 52rpx;
			// padding-left: 20rpx;
		}
	}

	.list {
		display: flex;

		.list-left {
			// font-weight: bold;
			width: 180rpx;
			font-size: 20rpx;

			.left-item {
				border-bottom: 2rpx solid #fff;
				font-size: 28rpx;
				background-color: #F7F7F7;

				.left-name {
					padding: 30rpx 6rpx;
					text-align: center;
				}

				.left-name-active {
					color: #f5a300;
					padding: 30rpx 6rpx;
					text-align: center;
					border-left: 8rpx solid #f5a300;
					background-color: #fff;
				}
			}
		}

		.list-right {
			display: flex;
			flex: 1;
			background-color: #fff;

			.list-title {
				font-weight: bold;
				padding: 30rpx 20rpx;
				font-size: 30rpx;
			}

			.right-content {
				display: flex;
				flex-wrap: wrap;

				.right-item {
					margin-left: 20rpx;
					width: 166rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 20rpx;

					.right-img {
						width: 160rpx;
						height: 160rpx;
					}

					.right-name {
						padding: 16rpx 0;
					}
				}
			}
		}
	}
</style>
